<!DOCTYPE html>
<html>
<head>
<title>02第1章  模块化编程(课时3)第2章（1课时）.MD</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">

<style>
/* https://github.com/microsoft/vscode/blob/master/extensions/markdown-language-features/media/markdown.css */
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

body {
	font-family: var(--vscode-markdown-font-family, -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif);
	font-size: var(--vscode-markdown-font-size, 14px);
	padding: 0 26px;
	line-height: var(--vscode-markdown-line-height, 22px);
	word-wrap: break-word;
}

#code-csp-warning {
	position: fixed;
	top: 0;
	right: 0;
	color: white;
	margin: 16px;
	text-align: center;
	font-size: 12px;
	font-family: sans-serif;
	background-color:#444444;
	cursor: pointer;
	padding: 6px;
	box-shadow: 1px 1px 1px rgba(0,0,0,.25);
}

#code-csp-warning:hover {
	text-decoration: none;
	background-color:#007acc;
	box-shadow: 2px 2px 2px rgba(0,0,0,.25);
}

body.scrollBeyondLastLine {
	margin-bottom: calc(100vh - 22px);
}

body.showEditorSelection .code-line {
	position: relative;
}

body.showEditorSelection .code-active-line:before,
body.showEditorSelection .code-line:hover:before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: -12px;
	height: 100%;
}

body.showEditorSelection li.code-active-line:before,
body.showEditorSelection li.code-line:hover:before {
	left: -30px;
}

.vscode-light.showEditorSelection .code-active-line:before {
	border-left: 3px solid rgba(0, 0, 0, 0.15);
}

.vscode-light.showEditorSelection .code-line:hover:before {
	border-left: 3px solid rgba(0, 0, 0, 0.40);
}

.vscode-light.showEditorSelection .code-line .code-line:hover:before {
	border-left: none;
}

.vscode-dark.showEditorSelection .code-active-line:before {
	border-left: 3px solid rgba(255, 255, 255, 0.4);
}

.vscode-dark.showEditorSelection .code-line:hover:before {
	border-left: 3px solid rgba(255, 255, 255, 0.60);
}

.vscode-dark.showEditorSelection .code-line .code-line:hover:before {
	border-left: none;
}

.vscode-high-contrast.showEditorSelection .code-active-line:before {
	border-left: 3px solid rgba(255, 160, 0, 0.7);
}

.vscode-high-contrast.showEditorSelection .code-line:hover:before {
	border-left: 3px solid rgba(255, 160, 0, 1);
}

.vscode-high-contrast.showEditorSelection .code-line .code-line:hover:before {
	border-left: none;
}

img {
	max-width: 100%;
	max-height: 100%;
}

a {
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

a:focus,
input:focus,
select:focus,
textarea:focus {
	outline: 1px solid -webkit-focus-ring-color;
	outline-offset: -1px;
}

hr {
	border: 0;
	height: 2px;
	border-bottom: 2px solid;
}

h1 {
	padding-bottom: 0.3em;
	line-height: 1.2;
	border-bottom-width: 1px;
	border-bottom-style: solid;
}

h1, h2, h3 {
	font-weight: normal;
}

table {
	border-collapse: collapse;
}

table > thead > tr > th {
	text-align: left;
	border-bottom: 1px solid;
}

table > thead > tr > th,
table > thead > tr > td,
table > tbody > tr > th,
table > tbody > tr > td {
	padding: 5px 10px;
}

table > tbody > tr + tr > td {
	border-top: 1px solid;
}

blockquote {
	margin: 0 7px 0 5px;
	padding: 0 16px 0 10px;
	border-left-width: 5px;
	border-left-style: solid;
}

code {
	font-family: Menlo, Monaco, Consolas, "Droid Sans Mono", "Courier New", monospace, "Droid Sans Fallback";
	font-size: 1em;
	line-height: 1.357em;
}

body.wordWrap pre {
	white-space: pre-wrap;
}

pre:not(.hljs),
pre.hljs code > div {
	padding: 16px;
	border-radius: 3px;
	overflow: auto;
}

pre code {
	color: var(--vscode-editor-foreground);
	tab-size: 4;
}

/** Theming */

.vscode-light pre {
	background-color: rgba(220, 220, 220, 0.4);
}

.vscode-dark pre {
	background-color: rgba(10, 10, 10, 0.4);
}

.vscode-high-contrast pre {
	background-color: rgb(0, 0, 0);
}

.vscode-high-contrast h1 {
	border-color: rgb(0, 0, 0);
}

.vscode-light table > thead > tr > th {
	border-color: rgba(0, 0, 0, 0.69);
}

.vscode-dark table > thead > tr > th {
	border-color: rgba(255, 255, 255, 0.69);
}

.vscode-light h1,
.vscode-light hr,
.vscode-light table > tbody > tr + tr > td {
	border-color: rgba(0, 0, 0, 0.18);
}

.vscode-dark h1,
.vscode-dark hr,
.vscode-dark table > tbody > tr + tr > td {
	border-color: rgba(255, 255, 255, 0.18);
}

</style>

<style>
/* Tomorrow Theme */
/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
/* Original theme - https://github.com/chriskempson/tomorrow-theme */

/* Tomorrow Comment */
.hljs-comment,
.hljs-quote {
	color: #8e908c;
}

/* Tomorrow Red */
.hljs-variable,
.hljs-template-variable,
.hljs-tag,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class,
.hljs-regexp,
.hljs-deletion {
	color: #c82829;
}

/* Tomorrow Orange */
.hljs-number,
.hljs-built_in,
.hljs-builtin-name,
.hljs-literal,
.hljs-type,
.hljs-params,
.hljs-meta,
.hljs-link {
	color: #f5871f;
}

/* Tomorrow Yellow */
.hljs-attribute {
	color: #eab700;
}

/* Tomorrow Green */
.hljs-string,
.hljs-symbol,
.hljs-bullet,
.hljs-addition {
	color: #718c00;
}

/* Tomorrow Blue */
.hljs-title,
.hljs-section {
	color: #4271ae;
}

/* Tomorrow Purple */
.hljs-keyword,
.hljs-selector-tag {
	color: #8959a8;
}

.hljs {
	display: block;
	overflow-x: auto;
	color: #4d4d4c;
	padding: 0.5em;
}

.hljs-emphasis {
	font-style: italic;
}

.hljs-strong {
	font-weight: bold;
}
</style>

<style>
/*
 * Markdown PDF CSS
 */

 body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif, "Meiryo";
	padding: 0 12px;
}

pre {
	background-color: #f8f8f8;
	border: 1px solid #cccccc;
	border-radius: 3px;
	overflow-x: auto;
	white-space: pre-wrap;
	overflow-wrap: break-word;
}

pre:not(.hljs) {
	padding: 23px;
	line-height: 19px;
}

blockquote {
	background: rgba(127, 127, 127, 0.1);
	border-color: rgba(0, 122, 204, 0.5);
}

.emoji {
	height: 1.4em;
}

code {
	font-size: 14px;
	line-height: 19px;
}

/* for inline code */
:not(pre):not(.hljs) > code {
	color: #C9AE75; /* Change the old color so it seems less like an error */
	font-size: inherit;
}

/* Page Break : use <div class="page"/> to insert page break
-------------------------------------------------------- */
.page {
	page-break-after: always;
}

</style>

<script src="https://unpkg.com/mermaid/dist/mermaid.min.js"></script>
</head>
<body>
  <script>
    mermaid.initialize({
      startOnLoad: true,
      theme: document.body.classList.contains('vscode-dark') || document.body.classList.contains('vscode-high-contrast')
          ? 'dark'
          : 'default'
    });
  </script>
<h1 id="%E7%AC%AC1%E7%AB%A0-%E6%A8%A1%E5%9D%97%E5%8C%96%E7%BC%96%E7%A8%8B%E8%AF%BE%E6%97%B63">第1章  模块化编程（课时3）</h1>
<ul>
<li><input type="checkbox" id="checkbox0"><label for="checkbox0"></label><strong>学习目标</strong></li>
</ul>
<ol>
<li>了解Node.js模块查找规则</li>
<li>理解常见的模块化解决方式</li>
</ol>
<h2 id="%E5%9B%9E%E9%A1%BE">回顾</h2>
<ol>
<li>
<p>vscode中安装了Live Server插件；</p>
</li>
<li>
<p>Web后端采用Node.js技术；</p>
</li>
<li>
<p>安装Node.js，配置环境变量path；</p>
</li>
<li>
<p>前端中的ES6中使用模块：</p>
<ol>
<li>.js模块文件向外暴露变量：export {name,age,obj};</li>
<li>.js模块文件向外暴露函数：
<ul>
<li>export function addFn(a,b){return a+b;}</li>
<li>export {fn1 as myFn1, fn2 as myFn2}</li>
<li>export <strong>default</strong> function add(x,y){
return x+y;
}</li>
</ul>
</li>
<li>ES6中引用模块：静态导入，不能运行时导入
<ul>
<li>import { name, age, obj } from './exp.js'</li>
<li>import { myFn1, myFn2 } from './exp2.js'</li>
<li>import { addFn as add } from './exp2.js'</li>
<li>import * as circle from './exp3.js';</li>
<li>import add from &quot;./exp4.js&quot;;</li>
<li>.html中，<code>&lt;script type=&quot;module&quot; src=&quot;imp.js&quot;&gt;&lt;/script&gt; </code></li>
</ul>
</li>
</ol>
</li>
<li>
<p>Node.js模块系统</p>
<ol>
<li>
<p>自定义模块在执行之前，Node.js 会使用一个如下的函数封装器将其封装：</p>
<pre class="hljs"><code><div>(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">exports, require, module, __filename, __dirname</span>) </span>{
<span class="hljs-comment">// 模块的代码实际上在这里</span>
});
</div></code></pre>
<p>所以，Node.js通过<code>require()</code>、<code>exports</code>、<code>module.exports</code>、<code>__filename</code>、 <code>__dirname</code> 来操作模块。</p>
</li>
<li>
<p>模块文件向外暴露信息方法：module.exports=data;</p>
</li>
<li>
<p>Node.js中加载模块：var data = require('./data.js')//  ./表示当前目录下</p>
</li>
<li>
<p>Node.js中执行模块：<strong>node</strong> use-data.js</p>
</li>
</ol>
</li>
<li>
<p>Node.js模块分类</p>
<ol>
<li>核心模块，编译二进制，加载速度最快，像 fs，http，events等。</li>
<li>文件模块，保存在硬盘上，加载速度比较慢，通过名称或路径来加载。</li>
<li>第三方模块，只指定名称则从node_modules目录下加载，查询的路径包括module.paths和全局目录。</li>
</ol>
</li>
</ol>
<h3 id="nodejs%E6%A8%A1%E5%9D%97%E6%9F%A5%E6%89%BE%E8%A7%84%E5%88%99%E4%BA%86%E8%A7%A3%E4%B8%80%E4%B8%8B">Node.js模块查找规则（了解一下）</h3>
<ol>
<li>require方法根据模块路径査找模块，如果是完整路径，直接引入模块。</li>
</ol>
<pre class="hljs"><code><div> <span class="hljs-built_in">require</span>(<span class="hljs-string">'./find.js'</span>);
</div></code></pre>
<ol start="2">
<li>如果模块后缀省略</li>
</ol>
<pre class="hljs"><code><div><span class="hljs-built_in">require</span>(<span class="hljs-string">'./find'</span>)
</div></code></pre>
<p>先加载文件，优先级为：.js &gt; .json &gt;.node</p>
<p>没有文件加载文件夹：</p>
<ul>
<li>先看有没有<code>package.json</code>，有的话，加载<code>package.json</code>里main属性指定的文件。</li>
<li>没有<code>package.json</code>，加载该目录下的<code>index.js</code>文件</li>
</ul>
<p>![img](02第1章  模块化编程(课时3).assets/16641848-7842f71495517241.png)</p>
<ol start="3">
<li>当模块没有路径且没有后缀</li>
</ol>
<pre class="hljs"><code><div><span class="hljs-built_in">require</span>(<span class="hljs-string">'find'</span>)
</div></code></pre>
<p>此种情况如下图所示。</p>
<p>![img](02第1章  模块化编程(课时3).assets/16641848-374bfd8f096eb62c.png)</p>
<h2 id="nodejs%E6%A8%A1%E5%9D%97%E7%B3%BB%E7%BB%9F%E4%B8%BE%E4%BE%8B">Node.js模块系统举例</h2>
<h3 id="%E4%BE%8B1-%E6%A8%A1%E5%9D%97%E6%96%87%E4%BB%B6%E6%9A%B4%E9%9C%B2%E4%B8%80%E4%B8%AA%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0">例1 模块文件暴露一个构造函数。</h3>
<ol>
<li>定义person.js文件，它l输出Person构造函数。</li>
<li>定义use-person.js文件，引入person.js，定义两个Person对象，并输出。</li>
<li>代码展示。</li>
</ol>
<pre class="hljs"><code><div><span class="hljs-comment">// person.js</span>
<span class="hljs-keyword">var</span> Person=<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">name,age</span>)</span>{
    <span class="hljs-keyword">this</span>.name=name;<span class="hljs-keyword">this</span>.age=age;
}
<span class="hljs-built_in">module</span>.exports=Person;
</div></code></pre>
<p>​	use-person.js文件代码。</p>
<pre class="hljs"><code><div><span class="hljs-comment">// use-person.js</span>
<span class="hljs-keyword">var</span> Person=<span class="hljs-built_in">require</span>(<span class="hljs-string">'./person.js'</span>);
<span class="hljs-keyword">var</span> p1=<span class="hljs-keyword">new</span> Person(<span class="hljs-string">'张三'</span>,<span class="hljs-number">20</span>)
<span class="hljs-built_in">console</span>.log(p1);

<span class="hljs-keyword">var</span> p2=<span class="hljs-keyword">new</span> Person(<span class="hljs-string">'李四'</span>,<span class="hljs-number">21</span>)
<span class="hljs-built_in">console</span>.log(p2);
</div></code></pre>
<p>​	在vscode终端执行如下命令。</p>
<pre class="hljs"><code><div>node use-person.js
</div></code></pre>
<p>​	执行结果：</p>
<pre class="hljs"><code><div>Person { <span class="hljs-attr">name</span>: <span class="hljs-string">'张三'</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">20</span> }
Person { <span class="hljs-attr">name</span>: <span class="hljs-string">'李四'</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">21</span> }
</div></code></pre>
<h3 id="%E4%BE%8B2-%E8%BF%94%E5%9B%9E%E4%B8%80%E4%B8%AAjson%E5%AF%B9%E8%B1%A1">例2 返回一个JSON对象</h3>
<ol>
<li>创建文件app-json.js，代码如下所示，其中定义了name和version属性，以及sayName方法。</li>
</ol>
<pre class="hljs"><code><div><span class="hljs-comment">// app-json.js</span>
<span class="hljs-keyword">var</span> app = {
    <span class="hljs-attr">name</span>: <span class="hljs-string">'app'</span>,
    <span class="hljs-attr">version</span>: <span class="hljs-string">'1.0.0'</span>,
    <span class="hljs-attr">sayName</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
        <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.name);
    }
}
<span class="hljs-built_in">module</span>.exports = app;
</div></code></pre>
<ol start="2">
<li>创建文件use-app-json.js，代码如下所示，</li>
</ol>
<pre class="hljs"><code><div><span class="hljs-keyword">var</span> app = <span class="hljs-built_in">require</span>(<span class="hljs-string">'./app-json.js'</span>);<span class="hljs-comment">//可以去掉.js，但不能去掉./</span>
<span class="hljs-built_in">console</span>.log(app.name,app.version)
app.sayName();<span class="hljs-comment">//app</span>
</div></code></pre>
<p>核心模块，以及第三方模块在后续再作补充。</p>
<h2 id="%E5%B0%8F%E7%BB%93">小结</h2>
<p>本章介绍了模块化思想，举例介绍了ES6中的模块。本单还介绍了Node.js模块系统分类、模块查找规则等，还举例介绍了Node.js模块系统。Node.js模块化编程思想是后续编程基础，需要好好掌握。模块化查找规则在后续课时中需要进一步巩固。</p>
<h1 id="%E7%AC%AC2%E7%AB%A0-%E5%88%9D%E8%AF%86nodejs">第2章  初识Node.js</h1>
<ul>
<li><input type="checkbox" id="checkbox1"><label for="checkbox1"></label><strong>学习目标</strong></li>
</ul>
<ol>
<li>了解什么是客户端和服务端</li>
<li>了解什么是Node.js</li>
<li>掌握Node.js的安装与配置</li>
<li>掌握Node.js入门必备知识</li>
</ol>
<h2 id="nodejs%E6%A6%82%E8%BF%B0">Node.js概述</h2>
<p>​	随着互联网的发展，全栈工程师（Full Stack Engineer）的概念开始兴起，全栈即包括用户界面、业务逻辑、数据建模、服务器、网络及环境等。这意味着，全栈工程师要熟练处理各层间的交互。而现在，有了Nodejs的出现，用JavaScript语言既可以进行客户端开发，又可以进行服务器端的开发，还可以与数据库交互。</p>
<p>​	Stack Overflow 发布2020开发者报告（https://insights.stackoverflow.com/survey/2020#developer-profile-developer-type-all-respondents）显示，全栈工程师比例很高。</p>
<img src="../../../../../教学/20-21第一学期/Node.js入门/课程进度/02/第2章/02第2章  初识Node.js.assets/stack overflow对开发者调查.PNG" alt="stack overflow对开发者调查" style="zoom:50%;" />
<img src="../../../../../教学/20-21第一学期/Node.js入门/课程进度/02/第2章/02第2章  初识Node.js.assets/stack overflow美国开发者调查.PNG" alt="stack overflow美国开发者调查" style="zoom:50%;" />
<h2 id="%E5%AE%A2%E6%88%B7%E7%AB%AF%E5%92%8C%E6%9C%8D%E5%8A%A1%E7%AB%AF">客户端和服务端</h2>
<h3 id="%E5%AE%A2%E6%88%B7%E7%AB%AF%E4%B8%8E%E6%9C%8D%E5%8A%A1%E7%AB%AF%E4%BC%A0%E7%BB%9F">客户端与服务端（传统）</h3>
<img src="../../../../../教学/20-21第一学期/Node.js入门/课程进度/02/第2章/02第2章  初识Node.js.assets/客户端与服务端交互.PNG" alt="客户端与服务端交互" style="zoom:50%;" />
<h3 id="%E5%AE%A2%E6%88%B7%E7%AB%AF%E4%B8%8E%E6%9C%8D%E5%8A%A1%E7%AB%AFnode">客户端与服务端（Node）</h3>
<img src="../../../../../教学/20-21第一学期/Node.js入门/课程进度/02/第2章/02第2章  初识Node.js.assets/Node出现后的客户端与服务端.PNG" alt="Node出现后的客户端与服务端" style="zoom:50%;" />
<h3 id="%E5%AE%A2%E6%88%B7%E7%AB%AF%E4%B8%8E%E6%9C%8D%E5%8A%A1%E7%AB%AF%E4%BA%A4%E4%BA%92">客户端与服务端交互</h3>
<img src="../../../../../教学/20-21第一学期/Node.js入门/课程进度/02/第2章/02第2章  初识Node.js.assets/客户端与服务端交互-1599963001835.PNG" alt="客户端与服务端交互" style="zoom:50%;" />
<ol>
<li>
<p>请求报文：</p>
<img src="../../../../../教学/20-21第一学期/Node.js入门/课程进度/02/第2章/02第2章  初识Node.js.assets/请求报文.jpg" alt="请求报文" style="zoom:50%;" />
</li>
<li>
<p>响应报文</p>
<img src="../../../../../教学/20-21第一学期/Node.js入门/课程进度/02/第2章/02第2章  初识Node.js.assets/响应报文.jpg" alt="响应报文" style="zoom:50%;" />
<p>响应行：
①报文协议及版本；
②状态码及状态描述；
响应头：
③响应报文头，也是由多个属性组成；
响应体：
④响应报文体，即我们需要的信息内容</p>
<p>HTTP状态码共分为5种类型：</p>
<p>1** ：信息，服务器收到请求，需要请求者继续执行操作
2** ：成功，操作被成功接收并处理
3** ：重定向，需要进一步的操作以完成请求
4** ：客户端错误，请求包含语法错误或无法完成请求
5** ：服务器错误，服务器在处理请求的过程中发生了错误</p>
<p>常见HTTP状态码 :</p>
<p>1xx ：
100 Continue
继续。客户端应继续其请求</p>
<p>2xx ：
200 OK
请求已成功，请求所希望的响应头或数据体将随此响应返回。出现此状态码是表示正常状态。</p>
<p>204 No Content（无内容）
服务器成功处理，但未返回内容。在未更新网页的情况下，可确保浏览器继续显示当前文档。</p>
<p>206 Partial Content（部分内容）
服务器成功处理了部分GET请求。</p>
<p>3xx：
301 Moved Permanently（永久重定向）
请求的资源已被永久的移动到新URL，返回信息会包括新的URL，浏览器会自动定向到新URL。今后任何新的请求都应使用新的URI代替。</p>
<p>302 Found（临时重定向）
与301类似。但资源只是临时被移动。表示请求的资源被分配了新的URL，希望本次访问使用新的URL。</p>
<p>303 See Othe（查看其他地址）
当请求者应对不同的位置进行单独的 GET 请求以检索响应时，服务器会返回此代码。对于除 HEAD 请求之外的所有请求，服务器会自动转到其他位置。</p>
<p>304 Not Modified（未修改）
所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源。</p>
<p>305 Use Proxy（使用代理）
请求者只能使用代理访问请求的网页。如果服务器返回此响应，那么，服务器还会指明请求者应当使用的代理</p>
<p>307 Temporary Redire（临时重定向）
与303有着相同的含义，307会遵照浏览器标准不会从POST变成GET；（不同浏览器可能会出现不同的情况）。</p>
<p>4xx ：
400 Bad Request （语法错误）
客户端请求的语法错误，服务器无法理解。</p>
<p>401 Unauthorized（未授权）
请求要求用户的身份认证</p>
<p>403 Forbidden（禁止）
服务器理解请求客户端的请求，但是拒绝执行此请求</p>
<p>404 Not Found（未找到）
服务器无法根据客户端的请求找到资源（网页）。除此之外，也可以在服务器拒绝请求但不想给拒绝原因时使用。</p>
<p>405 Method Not Allowed （方法禁用）
客户端请求中的方法被禁止。</p>
<p>406 Not Acceptable（不接受）
无法使用请求的内容特性来响应请求的网页。</p>
<p>408 Request Time-out（请求超时）
服务器等待客户端发送的请求时间过长，超时。</p>
<p>5xx
500Internal Server Error（服务器内部错误）
服务器遇到错误，无法完成请求。</p>
<p>501 Not Implemented（尚未实施）
服务器不具备完成请求的功能。例如，当服务器无法识别请求方法时，服务器可能会返回此代码。</p>
<p>502 Bad Gateway（错误网关）
作为网关或者代理工作的服务器尝试执行请求时，从远程服务器接收到了一个无效的响应</p>
<p>503 Service Unavailable（服务不可用）
由于超载或系统维护，服务器暂时的无法处理客户端的请求。通常，这只是一种暂时的状态。</p>
<p>504 Gateway Time-out（网关超时）
服务器作为网关或代理，未及时从上游服务器接收请求。</p>
<p>505 HTTP Version not supported（HTTP 版本不受支持）
服务器不支持请求中所使用的 HTTP 协议版本。</p>
</li>
</ol>
<h3 id="javascript%E5%9C%A8%E5%AE%A2%E6%88%B7%E7%AB%AF%E4%B8%8E%E6%9C%8D%E5%8A%A1%E7%AB%AF%E7%9A%84%E5%8C%BA%E5%88%AB">JavaScript在客户端与服务端的区别</h3>
<ol>
<li>JavaScript是脚本语言，一般运行在客户端，而Node.js可使JavaScript运行在服务器端。</li>
<li>JavaScript包括：ECMAScript、DOM和BOM3个部分：
<ol>
<li>ECMAScript：js核心语法</li>
<li>DOM：文档对象模型。如：ob1.style.color=&quot;red&quot;;</li>
<li>BOM：浏览器对象模型。如document.body.clientWidth</li>
</ol>
</li>
<li>客户端的JavaScirpt不仅应用核心语法ECMAScript，还会操作DOM和BOM，常见的应用场景如用户交互、动画特效、表单验证、发送Ajax请求等。</li>
<li>服务端的JavaScript应用核心语法ECMAScript，但是不操作DOM和BOM。它常常用来做一些在客户端做不到的事情，例如操作数据库、操作文件等，另外，在客户端的Ajax操作只能发送请求，而接受请求和做出响应的操作就需要服务端的JavaScript来完成。</li>
</ol>
<h2 id="nodejs%E7%9A%84%E5%AE%89%E8%A3%85%E5%92%8C%E9%85%8D%E7%BD%AE">Node.js的安装和配置</h2>
<h3 id="%E4%B8%8B%E8%BD%BD%E4%B8%8E%E5%AE%89%E8%A3%85">下载与安装</h3>
<ol>
<li>
<p>https://nodejs.org/zh-cn/</p>
<img src="../../../../../教学/20-21第一学期/Node.js入门/课程进度/02/第2章/02第2章  初识Node.js.assets/Node.js下载与安装.PNG" alt="Node.js下载与安装" style="zoom: 33%;" />
</li>
<li>
<p>https://nodejs.org/zh-cn/download/</p>
<img src="../../../../../教学/20-21第一学期/Node.js入门/课程进度/02/第2章/02第2章  初识Node.js.assets/Node.js下载与安装2.PNG" alt="Node.js下载与安装2" style="zoom:33%;" />
</li>
<li>
<p>安装后查看Node.js和NPM版本</p>
<p>node -v</p>
<img src="../../../../../教学/20-21第一学期/Node.js入门/课程进度/02/第2章/02第2章  初识Node.js.assets/查看node版本.PNG" alt="查看node版本" style="zoom:50%;" />
<p>npm -v</p>
<img src="../../../../../教学/20-21第一学期/Node.js入门/课程进度/02/第2章/02第2章  初识Node.js.assets/查看包管理工具版本.PNG" alt="查看包管理工具版本" style="zoom:50%;" />
<p>node.js安装后，要知道node.js安装在何处，命令窗口中是否可以执行node命令。如果不能执行node命令，则需要在“环境变量”中设置搜索路径Path。</p>
</li>
<li>
<p>命令窗口几个常用命令的使用</p>
<ul>
<li>dir 查看当前目录下所有条目</li>
<li>cd 切换目录</li>
<li>cls 清屏</li>
</ul>
</li>
</ol>
<h3 id="%E5%BF%AB%E9%80%9F%E4%BD%93%E9%AA%8Cnodejs">快速体验Node.js</h3>
<ol>
<li>
<p>在终端显示&quot;Hello world!&quot;</p>
<p>新建hello.js文件，文件代码如下，在代码文件所在目录下，使用node .\hello.js命令运行。</p>
<pre class="hljs"><code><div><span class="hljs-built_in">console</span>.log(<span class="hljs-string">"Hello world!"</span>);
</div></code></pre>
<p>运行结果如下图所示。</p>
<img src="../../../../../教学/20-21第一学期/Node.js入门/课程进度/02/第2章/02第2章  初识Node.js.assets/运行结果1.PNG" alt="运行结果1" style="zoom:50%;" />
</li>
<li>
<p>创建一个Web服务器，监听IP地址为127.0.0.1，端口为3000的访问请求，向该访问请求的页面中输出“Hello world”。</p>
<ol>
<li>新建demo2-2.js；</li>
<li>代码如下所示；</li>
</ol>
<pre class="hljs"><code><div><span class="hljs-comment">// 加载http模块</span>
<span class="hljs-keyword">var</span> http=<span class="hljs-built_in">require</span>(<span class="hljs-string">'http'</span>);
<span class="hljs-comment">// 创建http服务器</span>
http.createServer(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">req, res</span>)</span>{
    <span class="hljs-comment">// 响应结束</span>
    res.end(<span class="hljs-string">'Hello world'</span>)
}).listen(<span class="hljs-number">3000</span>,<span class="hljs-string">'127.0.0.1'</span>);<span class="hljs-comment">//监听网址与端口</span>
</div></code></pre>
<ol start="3">
<li>在代码文件所在目录下，运行代码文件；</li>
</ol>
<pre class="hljs"><code><div>node .\demo2<span class="hljs-number">-2.</span>js
</div></code></pre>
<ol start="4">
<li>运行结果如下图所示。</li>
</ol>
<img src="../../../../../教学/20-21第一学期/Node.js入门/课程进度/02/第2章/02第2章  初识Node.js.assets/运行结果2.PNG" alt="运行结果2" style="zoom:50%;" />
<ol start="5">
<li>本示例代码可稍加改进，如下所示。</li>
</ol>
<pre class="hljs"><code><div><span class="hljs-comment">// 加载http模块</span>
<span class="hljs-keyword">var</span> http=<span class="hljs-built_in">require</span>(<span class="hljs-string">'http'</span>);
<span class="hljs-comment">// 创建http服务器</span>
<span class="hljs-keyword">var</span> server=http.createServer();
<span class="hljs-comment">// 监听request事件</span>
server.on(<span class="hljs-string">'request'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">req, res</span>)</span>{
    <span class="hljs-keyword">var</span> url=req.url;<span class="hljs-comment">//不包括IP与端口部分</span>
    <span class="hljs-keyword">if</span>(url===<span class="hljs-string">'/'</span>){
        res.end(<span class="hljs-string">"Hello world!!"</span>);
    }<span class="hljs-keyword">else</span>{
        res.end(<span class="hljs-string">'404 Not Found'</span>);
    }
});
server.listen(<span class="hljs-number">3000</span>,()=&gt;{
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'server is listening at port 3000'</span>);
})
</div></code></pre>
</li>
</ol>

</body>
</html>
